//@ts-nocheck
import * as echarts from "echarts";
let tip;
class PouPlus {
  constructor(viewer, vue) {
    this.viewer = viewer;
    this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
    this.drawLayer = new Cesium.CustomDataSource("填挖方绘制图层");
    this.viewer.dataSources.add(this.drawLayer);
    this.polygon;
    this.polygonArr = [];
    this.myChart;
    this.echartBox;
    this.vue = vue;
  }

  start() {
    this.clear();
    tip = ElMessage({
      type: "success",
      message: "单击选择起点！",
      duration: 0,
      offset: 60,
    });
    return new Promise((resolve, reject) => {
      let tempPolygon;
      let tempLine;
      this.handler.setInputAction((e) => {
        let pos = this.pxTo3C(e.position);
        if (!Cesium.defined(pos)) {
          return;
        }
        let point = this.createPoint(pos);
        this.drawLayer.entities.add(point);
        this.polygonArr.push(pos);

        if (this.polygonArr.length == 1) {
          tip.message = "单击选择终点！";
          this.handler.setInputAction((evt) => {
            let movePos = this.pxTo3C(evt.endPosition);
            if (!Cesium.defined(movePos)) {
              return;
            }
            if (Cesium.defined(tempLine)) {
              this.drawLayer.entities.remove(tempLine);
            }
            tempLine = new Cesium.Entity({
              polyline: {
                positions: new Cesium.CallbackProperty(() => {
                  return this.polygonArr.concat(movePos);
                }, false),
                material: new Cesium.PolylineGlowMaterialProperty({
                  glowPower: 0.15,
                  color: Cesium.Color.fromCssColorString("#f9c532"),
                }),
                width: 3,
                clampToGround: true,
              },
            });
            this.drawLayer.entities.add(tempLine);
          }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
        }

        if (this.polygonArr.length == 2) {
          let Line = new Cesium.Entity({
            polyline: {
              positions: this.polygonArr,
              material: new Cesium.PolylineGlowMaterialProperty({
                glowPower: 0.15,
                color: Cesium.Color.fromCssColorString("#37a1fb"),
              }),
              width: 3,
              clampToGround: true,
            },
          });
          tip.message = "正在分析...";
          this.drawLayer.entities.add(Line);
          if (Cesium.defined(tempLine)) {
            this.drawLayer.entities.remove(tempLine);
          }
          this.removeEvent();
          let that = this;
          setTimeout(() => {
            that.getLine(that.polygonArr[0], that.polygonArr[1]);
          }, 100);
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    });
  }

  //生成插值点，
  getLine(start, end) {
    let distance = Cesium.Cartesian3.distance(start, end);
    distance = Math.round(distance) / 10;
    let xArr = [];
    let yArr = [];

    for (let i = 1; i < distance; i++) {
      let pos = Cesium.Cartesian3.lerp(
        start,
        end,
        i / distance,
        new Cesium.Cartesian3()
      );
      let carto = Cesium.Cartographic.fromCartesian(pos);
      xArr.push(
        `${Cesium.Math.toDegrees(carto.longitude).toFixed(
          2
        )},${Cesium.Math.toDegrees(carto.latitude).toFixed(2)}`
      );
      let height = this.viewer.scene.globe.getHeight(carto);
      yArr.push(height);
    }
    if (!this.echartBox) {
      this.echartBox = document.createElement("div");
      this.echartBox.style.width = "600px";
      this.echartBox.style.height = "300px";
      this.echartBox.style.position = "absolute";
      this.echartBox.style.left = "70%";
      this.echartBox.style.top = "50%";
      this.echartBox.style.transform = "translate(-50%,-20%)";
      this.echartBox.style.zIndex = 3000;
      this.echartBox.id = "main";
      this.echartBox.style.display = "none";
      this.echartBox.style.border = "1px solid #fbc21d";
      this.echartBox.style.padding = "10px 5px";
      let body = document.querySelector("body");
      body.appendChild(this.echartBox);
    } else {
      this.echartBox.style.display = "block";
    }

    var chartDom = document.getElementById("main");
    this.myChart = echarts.init(chartDom);
    this.echartBox.style.display = "block";
    let that = this;
    var option;

    option = {
      tooltip: {
        trigger: "axis",
        position: function (pt) {
          return [pt[0], "10%"];
        },
      },
      title: {
        left: "center",
        text: "地形剖面图",
        textStyle: {
          color: "#ffce45",
          fontStyle: "bold",
          // fontFamily:"KaiTi",

          fontSize: 80,
          height: 60,
        },
      },
      toolbox: {
        feature: {
          dataZoom: {
            yAxisIndex: "none",
          },
          restore: {},
          saveAsImage: {},
          myGuanBi: {
            show: true,
            title: "关闭",
            icon: "path://M952.311261 921.328619 542.892591 510.919389 950.154131 102.671381c8.53028-8.55177 8.53028-22.416546 0-30.967292-8.532327-8.55177-22.360264-8.55177-30.892591 0l-407.262564 408.248008L104.737436 71.704089c-8.53028-8.55177-22.36231-8.55177-30.892591 0-8.529257 8.55177-8.529257 22.416546 0 30.967292l407.262564 408.248008L71.687716 921.328619c-8.529257 8.55177-8.529257 22.416546 0 30.967292 4.26514 4.27435 9.856485 6.41306 15.446807 6.41306 5.590322 0 11.181667-2.13871 15.446807-6.41306l409.41867-410.409231 409.41867 410.409231c4.266164 4.27435 9.855462 6.41306 15.446807 6.41306 5.591345 0 11.17962-2.13871 15.446807-6.41306C960.841541 943.745165 960.841541 929.879366 952.311261 921.328619z",
            onclick: function guan() {
              that.clear();
              that.vue.analyzeList.children.forEach((e) => {
                if (e.name == "剖面分析") {
                  e.selected = false;
                }
              });
              that.vue.curItem = null;
            },
          },
        },
        iconStyle: {
          borderColor: "#ffce45",
        },
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: xArr,
        axisLabel: {
          formatter: function (value) {
            let arr = value.split(",");
            return `${arr[0]}°,${arr[1]}°`;
          },
          color: "#24acf2",
        },
      },
      yAxis: {
        type: "value",
        boundaryGap: [0, "100%"],
        axisLabel: {
          formatter: function (value) {
            return value + "米";
          },
          color: "#24acf2",
        },
        nameTextStyle: {
          color: "#24acf2",
        },
      },
      dataZoom: [
        {
          type: "inside",
          start: 0,
          end: 100,
        },
        {
          start: 0,
          end: 100,
        },
      ],
      series: [
        {
          name: "海拔",
          type: "line",
          symbol: "none",
          sampling: "lttb",
          itemStyle: {
            color: "rgb(255, 70, 131)",
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgb(255, 158, 68)",
              },
              {
                offset: 1,
                color: "rgb(255, 70, 131)",
              },
            ]),
          },
          data: yArr,
        },
      ],
    };

    option && this.myChart.setOption(option);

    this.myChart.on("finished", function () {
      if (tip) {
        tip.close();
        tip = null;
      }
    });
  }

  removeEvent() {
    this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
    this.handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    this.handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);
  }

  pxTo3C(cartesian2) {
    let ray = this.viewer.camera.getPickRay(cartesian2);
    let cartesian3 = this.viewer.scene.globe.pick(ray, this.viewer.scene);
    return cartesian3;
  }
  clear() {
    this.removeEvent();
    this.drawLayer.entities.removeAll();
    this.polygonArr = [];
    if (this.myChart) {
      this.myChart.dispose();
    }
    if (this.echartBox) {
      this.echartBox.style.display = "none";
      this.echartBox.parentElement.removeChild(this.echartBox);
      this.echartBox = null;
    }
    if (tip) {
      tip.close();
      tip = null;
    }
  }

  createPoint(position) {
    let point = new Cesium.Entity({
      position: position,
      point: {
        pixelSize: 5,
        color: Cesium.Color.fromCssColorString("#3388ff"),
        outline: true,
        outlineWidth: 2,
        outlineColor: Cesium.Color.WHITE,
      },
    });
    return point;
  }
}
export default PouPlus;
